<template>
  <div class="content" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="filter-area">
      <el-row>
        <el-col :span="6">
          <div class="filter-item">
            <div class="item-content">
              网点编码：
            </div>
            <div class="item-input">
              <el-input size="small" v-model="input_shopID" placeholder="请输入内容"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="filter-item">
            <div class="item-content">
              业代姓名：
            </div>
            <div class="item-input">
              <el-autocomplete
                  class="inline-input"
                  v-model="input_memberID"
                  :fetch-suggestions="querySearch"
                  placeholder="选择业代姓名"
                  :trigger-on-focus="false"
                  @select=""
                  size="small"
              ></el-autocomplete>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <el-date-picker
              size="small"
              v-model="input_dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="testFunc"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="content-area" v-infinite-scroll="loadMore">
      <el-empty v-if="feedPathList.length==0" style="margin-top: 250px" description="筛选结果为空"></el-empty>
      <el-row>
        <el-col :span="4" v-for="(feedPath,index) in feedPathList" :key="index" >
          <div class="feed-item">
            <el-image fit="cover" style="width: 98%; height: 300px;border-radius: 4px" :src="url_path+feedPath['path']"
                      :preview-src-list="[url_path+feedPath['path']]"/>
            <div class="item-mask">
              <p>{{ feedPath["shopCode__c"] }}</p>
              <p>{{ feedPath["label"] }}</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="no-more" v-if="feedPathList.length!=0">没有更多了...</div>
    </div>

  </div>
</template>

<script>
import {
  api_getAPIKeyDict, api_getCheckInSearchResult,
  api_getEmployeeList,
  api_getSearchTourPhotoByShopID,
  api_getShopDetailsByShopCode
} from "../api";
import {getMemberIDByName} from '../tools'
const url_path = "https://www.fxiaoke.com/FSC/EM/File/GetByPath?path="
export default {
  name: "tour-admin",
  components: {},
  data: function () {
    return {
      url_path,
      apiKeyDict: {},
      input_shopID: "",
      input_dateRange: "",
      input_memberID: "",
      iuput_startTime:0 ,
      input_endTime: 0,
      fullscreenLoading: false,
      feedPathList: [],
      imgsArr: [],
      employeeList: [],
      col: 4,
      page: 1,
      hasMore: true
    }
  },
  computed: {
    itemWidth() {
      return (138 * 0.5 * (document.documentElement.clientWidth / 375))
    },
    gutterWidth() {
      return (9 * 0.5 * (document.documentElement.clientWidth / 375))
    }
  },
  methods: {
    testFunc(value){
      if(value != null){
        this.iuput_startTime = Number(value[0]);
        this.input_endTime = Number(value[1]);
      }else{
        this.iuput_startTime = Number(0);
        this.input_endTime = Number(0);
      }

      console.log(this.iuput_startTime, this.input_endTime);
    },
    querySearch(queryString, cb) {
      var employeeList = this.employeeList;
      console.log("employeeList------->", employeeList)
      var results = queryString ? employeeList.filter(this.createFilter(queryString)) : employeeList;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSearch() {
      const _this = this;
      _this.feedPathList = [];
      _this.fullscreenLoading = true;
      _this.page = 1;
      _this.hasMore = true;
      _this.fetchPicListByPage();
    },
    fetchPicListByPage(){
      const _this = this;
      let memberID = ""
      _this.fullscreenLoading = true;
      if(_this.input_memberID!=""){//此时的input值为用户姓名，还未转换为真实ID
        memberID = getMemberIDByName(_this.input_memberID, _this.employeeList);
        console.log("memberID-------------->", memberID);
      }
      api_getCheckInSearchResult(memberID, _this.input_shopID,_this.iuput_startTime,_this.input_endTime,_this.page).then(res => {
        if (res != undefined) {
          _this.feedPathList = _this.feedPathList.concat(res);
        }
        if(res.length==0){
          _this.hasMore = false;
        }
        _this.fullscreenLoading = false;
        _this.page = _this.page + 1;
        console.log("_this.feedPathList----->", _this.feedPathList)
      })
    },
    loadMore() {
      const _this = this;
      if( _this.feedPathList.length > 0 && _this.fullscreenLoading == false && _this.hasMore){
        console.log("loadMore------------------>>>>>>>>>>");
        _this.fetchPicListByPage();
      }
      if(!_this.hasMore){
        console.log("没有更多了------------------>>>>>>>>>>");
      }
    }
  },
  mounted() {
    const _this = this;
    _this.fullscreenLoading = true;
    api_getEmployeeList().then(res => {
      res.forEach(item => {
        item["value"] = item["name"]
      })
      _this.employeeList = res;
      _this.fullscreenLoading = false;
    })
    //     .then(() => {
    //   api_getAPIKeyDict().then(api_res => {
    //     _this.apiKeyDict = api_res;
    //     _this.fullscreenLoading = false;
    //   })
    // })
  }
}
</script>

<style scoped lang="less">
.content {
  min-width: 936px;
  background-color: #FEFFFE;
}

.filter-area {
  padding: 10px;
  position: fixed;
  top: 0;
  width: 80%;
  z-index: 99;
  background-color: #FFFFFF;
  height: 28px;
  box-shadow: 0 3px 10px 0 rgb(31 35 41 / 4%);
}

.filter-item {
  display: flex;
  height: 32px;
  .item-content {
    line-height: 32px;
    font-weight: 600;
  }

  .item-input {
  }
  height: 32px;
}

.content-area {
  margin: 10px;
  margin-top: 52px;
}

.no-more {
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 10px;
  color: #bdbdbd;
  text-align: center;

}

.feed-item {
  position: relative;

  .item-mask {
    position: absolute;
    background-color: rgba(0, 0, 0, .8);
    right: 2%;
    top: 0;
    color: #ffffff;
    padding: 2px 0 2px 0;
    p {
      padding: 0px 4px 0px 4px;
    }
  }
}

</style>
